import React, { useState, useEffect } from 'react';
import { Row, Col, Carousel, Typography, Divider, Spin } from 'antd';
import MovieCard from '../components/MovieCard';
import axios from 'axios';

const { Title } = Typography;

// Mock data for carousel
const carouselItems = [
  {
    id: 1,
    title: '哪吒之魔童闹海',
    imageUrl: 'https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9c1694b499c4f5e82bc259f6b71fb83e.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080'
  },
  {
    id: 2,
    title: '流浪地球2',
    imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.fee4dcf06b8186ef4bbd4118c9fc26aa?rik=VeCYI%2bIJwDK2UA&riu=http%3a%2f%2fi0.hdslb.com%2fbfs%2farchive%2fa3f9273f4f5a97d734f2e7c62b41c0d11138d464.jpg&ehk=%2bhzz6EMsbrIce%2bsxpCkjY4Skm%2fus5Jcd%2fmeWLur%2fCuQ%3d&risl=&pid=ImgRaw&r=0'
  },
  {
    id: 3,
    title: '铃芽之旅',
    imageUrl: 'https://n.sinaimg.cn/sinakd20230212s/264/w750h314/20230212/9247-7bae6fdd2045166dd2745059fe53b8bd.jpg'
  }
];

// Mock data for movies
const mockMovies = [
  {
    id: 1,
    title: '流浪地球2',
    posterUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.fd903e798ddbbc4258081eef0141e3af?rik=mtBwy1YJTHQ7Yw&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20230122ac%2f684%2fw1284h1800%2f20230122%2f93fd-fb3b91441a0437efbd5e51db1c6b950e.jpg&ehk=i2JuTI3Dw7nYWxTvvnEjdQbL7hdgEQWK9jNyeit7km0%3d&risl=&pid=ImgRaw&r=0',
    rating: 8.5,
    status: 'RELEASED',
    releaseDate: '2023-05-01'
  },
  {
    id: 2,
    title: '满江红',
    posterUrl: 'https://n.sinaimg.cn/ent/transform/523/w550h773/20230124/b88e-f30786ed496b8f5fca1db60b98b708ee.jpg',
    rating: 7.8,
    status: 'UPCOMING',
    releaseDate: '2023-06-15'
  },
  {
    id: 5,
    title: '铃芽之旅',
    posterUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.EKWkaqtN25KVoIEhqivnFgHaKd?cb=iwp2&rs=1&pid=ImgDetMain',
    rating: 9.0,
    status: 'RELEASED',
    releaseDate: '2023-04-10'
  },
  {
    id: 4,
    title: '熊出没之重返地球',
    posterUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.e900d72b865adacc9205b5bc36b148e1?rik=lRgm9C91OMFIiQ&riu=http%3a%2f%2fwww.bhwh.gov.cn%2fuploads%2feditor%2fueditor_remote%2f20211126%2f1637894380966399.jpeg&ehk=039NU%2bv66QNajWoogBE50Poex7IiKWf6A8y0K8ZGgqY%3d&risl=&pid=ImgRaw&r=0',
    rating: 6.7,
    status: 'ENDED',
    releaseDate: '2023-03-01'
  },
  {
    id: 3,
    title: '奇迹笨小孩',
    posterUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.VDqX1eG_kFRMTzuZOFI0PQHaKX?cb=iwp2&rs=1&pid=ImgDetMain',
    rating: 8.2,
    status: 'RELEASED',
    releaseDate: '2023-05-05'
  },
  {
    id: 4,
    title: '唐探1900',
    posterUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.UYHJUHcPANN0s2zcdA704QHaKg?cb=iwp2&rs=1&pid=ImgDetMain',
    rating: 7.5,
    status: 'UPCOMING',
    releaseDate: '2023-07-20'
  }
];

const Home = () => {
  const [movies, setMovies] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // In a real app, fetch movies from backend API
    // Example:
    // axios.get('api/movies')
    //   .then(response => {
    //     setMovies(response.data);
    //     setLoading(false);
    //   })
    //   .catch(error => {
    //     console.error('Error fetching movies:', error);
    //     setLoading(false);
    //   });
    
    // Using mock data for now
    setTimeout(() => {
      setMovies(mockMovies);
      setLoading(false);
    }, 1000);
  }, []);

  return (
    <div>
      {/* Carousel */}
      <div className="carousel-container">
        <Carousel autoplay>
          {carouselItems.map(item => (
            <div key={item.id}>
              <img 
                src={item.imageUrl} 
                alt={item.title} 
                style={{ width: '100%', maxHeight: '400px', objectFit: 'cover' }}
              />
            </div>
          ))}
        </Carousel>
      </div>

      {/* Now Playing */}
      <div>
        <Title level={2}>正在热映</Title>
        <Divider />
        {loading ? (
          <div style={{ textAlign: 'center', padding: '50px' }}>
            <Spin size="large" />
          </div>
        ) : (
          <Row gutter={[16, 24]}>
            {movies
              .filter(movie => movie.status === 'RELEASED')
              .map(movie => (
                <Col xs={24} sm={12} md={8} lg={6} xl={4} key={movie.id}>
                  <MovieCard movie={movie} />
                </Col>
              ))}
          </Row>
        )}
      </div>

      {/* Coming Soon */}
      <div style={{ marginTop: '40px' }}>
        <Title level={2}>即将上映</Title>
        <Divider />
        {loading ? (
          <div style={{ textAlign: 'center', padding: '50px' }}>
            <Spin size="large" />
          </div>
        ) : (
          <Row gutter={[16, 24]}>
            {movies
              .filter(movie => movie.status === 'UPCOMING')
              .map(movie => (
                <Col xs={24} sm={12} md={8} lg={6} xl={4} key={movie.id}>
                  <MovieCard movie={movie} />
                </Col>
              ))}
          </Row>
        )}
      </div>
    </div>
  );
};

export default Home; 